<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>
<rapid:override name="title">
    -消息列表
</rapid:override>
<rapid:override name="header-style">
    <style>
        #selected-communication-user {
            height:60px;
            padding:10px 30px;
            text-decoration:none;
            color:white;
            background-color:#009688;
        }
        .communication-user {
            height:60px;
            padding:10px 30px;
            text-decoration:none;
            color:black;
        }
        .communication-box {
            border-radius: 10px;
            padding: 12px;
            max-width: 400px;
            min-height: 15px;
            background-color:#9ed3e5;
            margin:10px 30px;
            word-wrap:break-word;
            word-break:break-all;
        }
    </style>
</rapid:override>

<rapid:override name="content">
    <blockquote class="layui-elem-quote">
        <span class="layui-breadcrumb" lay-separator="/">
          <a href="/backIndex/homepage">首页</a>
          <a><cite>我的关注</cite></a>
          <a><cite>消息列表</cite></a>
        </span>
    </blockquote>
    <div class="layui-container" style="width:1500px;height:750px;background-color:#009688;padding:5px 5px">
        <div style="float:left;height:740px;width:300px;background-color:#f2f2f2;">
            <div style="text-align:center;height:50px;position:relative">
                <span style="position: absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);">近期消息</span>
            </div>
            <hr>
            <div id="communication-user-box-container" style="overflow:auto;height:670px">
                <ul id="communication-user">
                    <li style="margin-bottom:0px;">

                    </li>
                </ul>
            </div>
        </div>
        <div style="float:right;width:1185px;height:100%;background-color:#f2f2f2;">
            <div style="text-align:center;height:50px;position:relative">
                <span style="position: absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);">${senderUser.nickname}</span>
            </div>
            <hr>
            <div id="message-contain-box" style="height:480px;overflow:auto;">
            </div>
            <div style="height:164px;">
                <form id="send-message-form" class="layui-form" lay-filter="form-send">
                    <input id="userId" type="hidden" name="userId" value="${sessionScope.user.userId}">
                    <input id = "receiverId" type="hidden" name="receiverId" value="${id}">
                    <textarea id="message-area" name="context" required placeholder="请输入" class="layui-textarea" style="resize:none;background-color:rgba(0,0,0,0);height:140px;"></textarea>
                    <button id="message-send-btn" class="layui-btn" onclick="sendMsg()" lay-submit lay-filter="send-message" style="float:right;margin:6px!important">发送信息</button>
                </form>
            </div>
        </div>
    </div>

</rapid:override>
<rapid:override name="footer-script">
    <script>
        layui.use(['flow', 'form'], function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          var form = layui.form;
          flow.load({
            elem: '#communication-user' //指定列表容器
            ,scrollElem: '#communication-user-box-container'
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
              var lis = [];
              //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
              $.get('/message/'+page, function(res){
                //假设你的列表返回在data集合中
                layui.each(res.list, function(index, item){
                  lis.push("<li style=margin-bottom:0px;>"
                    +"<a href=/message?id="+item.sender+" onmouseenter=changeBgColor('#009688','"+item.sender+"');changeFontColor('#ffffff','"+item.sender+"') onmouseleave=changeBgColor('','"+item.sender+"');changeFontColor('#000000','"+item.sender+"')>"
                    +"<div id="+item.sender+" class=communication-user>"
                    +"<div style=text-align:center;margin:15px;>"+item.senderUser.nickname+"${senderId}</div>"
                    +"</div>"
                    +"<hr class=layui-border-black style=margin:0>"
                    +"</a>"
                    +"</li>"
                  );
                });

                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                next(lis.join(''), page < res.pages);
              });
            }
          });
          //点击发送,不刷新页面
          form.on('submit(send-message)', function(data){
            $.ajax({
                url:'/message/sendMessage',
                type:'post',
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                data: $("#send-message-form").serialize(),
            })
            var textContext = document.getElementById("message-area");
            textContext.value="";
            return false;
          });
        });



        //加载历史记录消息
        window.onload = function() {
            //arr暂时是模拟数据,改为发送的消息
            //messageData是arr中的每一条数据(forEach遍历),index是数据序号
            ${messages}.forEach((messageData,index) => {
                var divBox = document.getElementById("message-contain-box");
                var normalDiv = document.createElement("div");
                var childDiv = document.createElement("div");
                var timeDiv = document.createElement("div");
                childDiv.setAttribute("class","communication-box");
                //下一行if判断条件改为(发消息的人是否是自己,是自己为true)
                    childDiv.setAttribute("style",messageData.float);
                //下一行messageData改为后台传入的数据中该消息对应的内容
                var p = document.createElement("p");
                p.innerHTML=messageData.content;
                childDiv.appendChild(p);
                timeDiv.setAttribute("style","font-size:12px;text-align: center;");
                //下一行时间改为后台传入的数据中该消息对应的时间
                var timeText = document.createTextNode(messageData.time);
                timeDiv.appendChild(timeText);
                normalDiv.setAttribute("style","width:1168px;overflow:hidden");
                normalDiv.appendChild(timeDiv);
                normalDiv.appendChild(childDiv);
                divBox.appendChild(normalDiv);
            });

            //滚动条初始位置在最底
            $('#message-contain-box').scrollTop( $('#message-contain-box')[0].scrollHeight );
        }
    </script>
    <script src="/js/websocket-connect.js"></script>
</rapid:override>
<%@ include file="../Public/framework.jsp" %>
